<template>
  <div class="wap-container enWorkingOrder" id="container">
    <section class="top pt10 bgfff">
      <ul class="tip-box c999">
        <li v-bind:class="{blue: orderInfo.systemStatus === 2 || orderInfo.systemStatus === 3}">接单</li>
        <li v-bind:class="{blue: orderInfo.systemStatus === 4}">行程中</li>
        <li v-bind:class="{blue: orderInfo.systemStatus === 5}">处理中</li>
        <li v-bind:class="{blue: orderInfo.systemStatus > 6 && orderInfo.systemStatus < 10}">处理完成</li>
        <li v-bind:class="{blue: orderInfo.systemStatus === 10}">关闭</li>
      </ul>
      <div class="line">
        <i v-bind:class="{down: orderInfo.systemStatus > 1, marking: orderInfo.systemStatus === 2 || orderInfo.systemStatus === 3}"></i>
        <i v-bind:class="{down: orderInfo.systemStatus > 3, marking: orderInfo.systemStatus === 4}"></i>
        <i v-bind:class="{down: orderInfo.systemStatus > 4, marking: orderInfo.systemStatus === 5}"></i>
        <i v-bind:class="{down: orderInfo.systemStatus > 6, marking: orderInfo.systemStatus > 6 && orderInfo.systemStatus < 10}"></i>
        <i v-bind:class="{down: orderInfo.systemStatus > 9, marking: orderInfo.systemStatus === 10}"></i>
      </div>
      <div class="map" v-if="orderInfo.systemStatus > 4 && (arriveLoc.lat != 0 || orderInfo.engineerWork.arriveWkt)" @click="goMyLocus">我的行程<img src="~assets/images2/icon_xingcheng@2x.png"></div>
    </section>
    <div class="order-info">
      <ul class="pl10 pb15">
        <li class="rowflex">
          <div class="info-item c666 ">工单编号</div>
          <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span>  </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系人</div>
          <div>{{orderInfo.linkMan}}</div>
        </li>
        <li class="rowflex">
          <div class="info-item c666">联系电话</div>
          <div>{{orderInfo.linkPhone}}</div>
        </li>
        <li class="rowflex" v-if="false">
          <div class="info-item c666" >流程模板</div>
          <div>{{orderInfo}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.county">
          <div class="info-item c666 ">区县</div>
          <div>{{orderInfo.county}}</div>
        </li>
        <li class="rowflex" v-if="orderInfo.customer">
          <div class="info-item c666 " >服务对象</div>
          <div>{{orderInfo.customer.customerName}}</div>
        </li>
        <div class="warrantyStatus" v-if="orderInfo.equipment && orderInfo.equipment">
          <span v-if="orderInfo.equipment.warrantyTime">维保到期日期：{{orderInfo.equipment.warrantyTime}}</span>
          <span v-if="orderInfo.equipment.warrantyStatus">维保状态：{{orderInfo.equipment.warrantyStatus}}</span>
        </div>
        <li class="rowflex" v-if="orderInfo.equipment">
          <div class="info-item c666">设备编号</div>
          <div>{{orderInfo.equipment.equipmentNo}}</div>
        </li>
        <li class="rowflex" v-if="picList.length > 0">
          <div class="info-item c666">故障照片</div>
          <div class="pic-box">
            <div class="pics rowflex">
              <!--<div v-for="item in orderInfo.repairFileStorePath" class="picItem" v-bind:style="{backgroundImage: 'url(http://'+item.path+')'}"></div>-->
              <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
            </div>
          </div>
        </li>
        <li class="rowflex">
          <div class="info-item c666 ">工作内容</div>
          <div class="errorDescription">{{orderInfo.errorDescription}}</div>
        </li>

      </ul>
    </div>
    <group v-if="orderInfo.systemStatus === 2" >
      <datetime-range title="预约时间" placeholder="请选择预约时间" :start-date="_dateFormat(new Date())"
                      :end-date="_dateFormat(new Date(new Date()-(-1000*60*60*24*15)))"
                      v-model="appointTime"></datetime-range>
    </group>

    <section class="toll-box" v-if="orderInfo.systemStatus > 6 && allToll > 0">
      <div class="toll-info">
        <div class="pl10 toll-title">收费项目</div>
        <ul class="pl10 pr10 pb15">
          <li v-for="item in serviceList" class="rowflex">
            <div class="info-item c666">{{item.serviceType}}</div>
            <div class="ml10">{{item.toll}}元</div>
          </li>
        </ul>
        <div class="sum c666 pr10">合计<span class="ml10 red">{{allToll}}</span><span class="c999">元</span></div>
      </div>
    </section>

    <div class="btn-box" v-if="orderInfo.systemStatus < 7">
      <div v-if="orderInfo.systemStatus === 2 || orderInfo.systemStatus === 3" @click="subscribe($event)">预约</div>
      <div v-if="orderInfo.systemStatus === 2 || orderInfo.systemStatus === 3" @click="startOff">出发</div>
      <div  v-if="orderInfo.systemStatus === 4" @click="arrive()">到达</div>
      <div  v-if="orderInfo.systemStatus === 5 || orderInfo.systemStatus === 6" @click="startWork()">开始处理</div>
      <div class="long"  v-if="orderInfo.systemStatus === 5 || orderInfo.systemStatus === 6" @click="addTollService()">添加收费项目</div>
      <div class="long"  v-if="(orderInfo.systemStatus === 5 || orderInfo.systemStatus === 6) && !orderInfo.proposer.subWechat && orderInfo.userStatus == 1" @click="confirmService()">确认收费项目</div>
    </div>
    <div class="btn-box">
      <div class="long"  v-if="orderInfo.userStatus == 2 && !orderInfo.proposer.subWechat" @click="payOrder()">付款二维码</div>
      <div class="register"  v-if="(orderInfo.systemStatus === 5 || orderInfo.systemStatus === 6) && !orderInfo.proposer.subWechat" @click="invitationRegister()">注册邀请</div>
    </div>
    <div class="photo-box" v-if="orderInfo.systemStatus === 4 && positionError">
    <div class="photo" @click="showPopup">拍照</div>
      <span class="c999">在您点击到达后因网络等原因未能成功定位当前位置，再点击拍照，以此证明您已到达指定地点</span>
    </div>

    <section class="evaluate-box mb20" v-if="orderInfo.evaluate">
      <div class="pl10 evaluate-title">客户评价</div>
      <div class="order-score">
        <p class="c666">客戶对您本次服务的总体评价</p>
        <div class="star-box">
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 0}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 1}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 2}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 3}"></div>
          <div class="star-item" v-bind:class="{light: parseInt(orderInfo.evaluate.level) > 4}"></div>
        </div>
      </div>
      <div v-if="orderInfo.evaluate.mannerEvaluate != '' || orderInfo.evaluate.skillEvaluate != '' || orderInfo.evaluate.speedEvaluate != '' ||  orderInfo.evaluate.useEvaluate != ''">
        <div class="pl10 evaluate-title">详细评价</div>
        <div class="bottom-content">
          <ul class="appraise-box pl10">
            <li class="apparise-item" v-if="orderInfo.evaluate.useEvaluate">
              <div><span>1</span><span class="item-content">客戶对本公司产品使用的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.useEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.mannerEvaluate">
              <div><span>2</span><span class="item-content">客戶对本公司服务人员态度的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.mannerEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.skillEvaluate">
              <div><span>3</span><span class="item-content">客戶对本公司服务人员技术的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate )=== 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.skillEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
            <li class="apparise-item" v-if="orderInfo.evaluate.speedEvaluate">
              <div><span>4</span><span class="item-content">客戶对本公司服务人员速度的评价</span></div>
              <div class="selects">
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 4 }">优<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate)=== 3 }">良<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 2 }">中<div class="mark"></div></div>
                <div class="select-item" v-bind:class="{ typeMark: parseInt(orderInfo.evaluate.speedEvaluate) === 1 }">差<div class="mark"></div></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="orderInfo.evaluate.option">
        <div class="pl10 suggest-title">意见反馈</div>
        <div class="suggest-content">
          {{orderInfo.evaluate.option}}
        </div>
      </div>
    </section>

    <div v-transfer-dom>
      <popup v-model="photoPopup" height="90%" style="background-color: #fff">
        <popup-header
          left-text="取消"
          right-text="确认"
          title="设备维修图片"
          :show-bottom-border="false"
          @on-click-left="showPopup"
          @on-click-right="photoArrive"></popup-header>
        <UploadImage :imgs="picPathList"></UploadImage>
      </popup>
    </div>

    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="showQR" hide-on-blur class="dialog-demo">
        <div style="height: 0.4rem">注册邀请二维码</div>
        <div class="img-box">
          <img :src="qr" style="max-width:90%">
        </div>
        <div @click="showQR=false">
          <img src="~assets/images2/icon_quxiao@3x.png" style="height: 0.2rem ; margin-top: 18px; margin-bottom: 18px;"/>
        </div>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showPayQR" hide-on-blur class="dialog-demo">
        <div style="height: 0.4rem">付款二维码</div>
        <div class="img-box">
          <img :src="'data:image/png;base64,'+ payQRbase" style="max-width:90%">
        </div>
        <div @click="showPayQR=false">
          <img src="~assets/images2/icon_quxiao@3x.png" style="height: 0.2rem ; margin-top: 18px; margin-bottom: 18px;"/>
        </div>
      </x-dialog>
    </div>

    <Loading :show="isShowLoading"></Loading>
  </div>
</template>




<script>
  import {dateFormat, TransferDom, Popup, Alert, PopupHeader, Previewer, DatetimeRange, Group,XDialog,Loading} from 'vux'
  import UploadImage from './uploadImage.vue'
  import AMap from 'AMap'

  export default {
    name: "EnWorkingOrder",
    components: {dateFormat, TransferDom, UploadImage, Popup, Alert, PopupHeader, Previewer, DatetimeRange, Group,XDialog,Loading},
    directives: {
      TransferDom
    },
    data() {
      return {
        orderId: '',
        userInfo: {},
        orderInfo: {
          equipment: {},
          proposer: {},
        },
        startLoc: {
          lng: 0,
          lat: 0
        },
        arriveLoc: {
          lng: 0,
          lat: 0
        },
        appointTime:[],//预约时间
        manLoc: {},
        allToll: 0,
        serviceList: [],
        positionError: false,
        picPathList: [],
        picIdList: [],
        photoPopup: false,
        geolocation: Object,
        picList: [],
        bigImgPath: [],
        //图片预览
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.enWorkingOrder .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
        qr: Object,
        payQRbase: Object,
        showQR: false,
        showPayQR: false,
        isShowLoading: false
      }
    },
    methods: {
      //默认时间
      // dateToArray(date) {
      //   let dateStr = this._dateFormat(date, 'YYYY-MM-DD hh:mm:ss')
      //   let arr = dateStr.split(' ');
      //   let timeArr = arr[1].split(':');
      //   return [arr[0],timeArr[0],timeArr[1]]
      // },
      // 时间转换
      arrayToDate(arr) {
        if(arr.length == 0 ){
          return null
        }
        return this._dateFormat(arr[0]+' '+arr[1]+':'+arr[2]+':00', 'YYYY-MM-DD hh:mm:ss')
      },
      //图片预览
      show(index) {
        console.log(index)
        this.$refs.previewer.show(index)
      },
      showBig() {
        this.showBigPicture = !this.showBigPicture;
      },
      showPopup: function () {
        this.photoPopup = !this.photoPopup
      },
      goBack: function () {
        this.$router.go(-1)
      },
      receiveOrder: function () {
        this.$http.put('/work/api/workorder/received/' + this.orderId).then(res => {
            console.log(res)
            this.$router.push({path: '/engineer/enWorkingOrder', query: {orderId: this.orderId}})
          }
        )
      },
      subscribe: function (event) {
        if (this.appointTime.length == 0){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择预约时间'
          })
          return false
        }
        if (this.orderInfo.systemStatus === 2) {
          this.$http.put('/work/api/workorder/appointing/' + this.orderId,
            {appointTime: this.arrayToDate(this.appointTime, 'yyyy-mm-dd HH:MM:SS')}).then(res => {
            this.orderInfo.systemStatus = 3

              // 显示
              this.$vux.toast.show({
                text: '预约完成',
              })

            })
          }
        },
        startOff: function () {
          if (this.orderInfo.systemStatus == 3) {
            let that = this
            let mapObj = new AMap.Map('iCenter');
            mapObj.plugin('AMap.Geolocation', function () {
              let  geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              });

              mapObj.addControl(geolocation);
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', (result) => {
                console.log(result.position)
                let lng =  result.position.lng
                let lat =  result.position.lat
                console.log(lng+ ',' + lat)
                that.startLoc.lng = result.position.lng
                that.startLoc.lat = result.position.lat
                let pointStr = 'Point(' + lng + ' ' + lat + ')'

                try {
                  that.$http.put('/work/api/workorder/departe/' + that.orderId, pointStr, {headers: {"Content-Type": "application/json"}}).then(res => {
                    that.orderInfo.systemStatus = 4

                    }
                  )
                }catch (e) {
                  console.log(e)
                }

              })
              AMap.event.addListener(geolocation, 'error', (result) => {
                let lng =  102.833513
                let lat =  24.881508
                console.log(lng+ ',' + lat)
                that.startLoc.lng = lng
                that.startLoc.lat = lat
                let pointStr = 'Point(' + lng + ' ' + lat + ')'

                try {
                  that.$http.put('/work/api/workorder/departe/' + that.orderId, pointStr, {headers: {"Content-Type": "application/json"}}).then(res => {
                      that.orderInfo.systemStatus = 4

                    }
                  )
                }catch (e) {
                  console.log(e)
                }
              })      //返回定位出错信息
            })
          }
        },
        arrive: function () {
          let that = this
          let mapObj = new AMap.Map('iCenter');
          mapObj.plugin('AMap.Geolocation', function () {
            let geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 10000,          //超过10秒后停止定位，默认：无穷大
              maximumAge: 0,           //定位结果缓存0毫秒，默认：0
              convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true,        //显示定位按钮，默认：true
              buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
              buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });

            mapObj.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', (res) => {
              that.arriveLoc.lng = res.position.lng
              that.arriveLoc.lat = res.position.lat
              console.log(that.manLoc.lng)
              console.log(getDistance(that.arriveLoc.lng, that.arriveLoc.lat, that.manLoc.lng, that.manLoc.lat))
              if (getDistance(that.arriveLoc.lng, that.arriveLoc.lat, that.manLoc.lng, that.manLoc.lat) > 300) {
                that.$vux.alert.show({
                  title: '提示',
                  content: '您还未到达指定地点，如位置有误，请使用拍照打卡',
                })
                that.positionError = true
              } else {
                let data = {
                  arriveStatus: 1,
                  wkt: 'Point(' + that.arriveLoc.lng + ' ' + that.arriveLoc.lat + ')'
                }
                that.$http.put('/work/api/workorder/inhand/' + that.orderId, data, {headers: {"Content-Type": "application/json"}}).then(res => {
                    that.orderInfo.systemStatus = 5
                    console.log(res)
                  }
                )
              }
            })
            AMap.event.addListener(geolocation, 'error', (res) => {
              that.positionError = true
              that.$vux.alert.show({
                title: '提示',
                content: '获取位置失败，请使用拍照打卡'
              })
            });      //返回定位出错信息
          })
            /*
          this.$register(["getLocation", "closeWindow"])
            .then(() => {
              this.$wechat.getLocation({
                type: "gcj02",
                success: res => {
                  if (res.errMsg === "getLocation:ok") {
                    console.log(res)
                    this.arriveLoc.lng = res.longitude
                    this.arriveLoc.lat = res.latitude
                    console.log(res.longitude + '  ' + res.latitude)
                    if (getDistance(this.arriveLoc.lng, this.arriveLoc.lat, this.manLoc.lng, this.manLoc.lat) > 300) {
                      console.log(getDistance(this.arriveLoc.lng, this.arriveLoc.lat, this.manLoc.lng, this.manLoc.lat))
                      this.$vux.alert.show({
                        title: '提示',
                        content: '您还未到达指定地点，如位置有误，请使用拍照打卡',
                      })
                      this.positionError = true
                    } else {
                      let data = {
                        arriveStatus: 1,
                        wkt: 'Point(' + this.arriveLoc.lng + ' ' + this.arriveLoc.lat + ')'
                      }
                      this.$http.put('/work/api/workorder/inhand/' + this.orderId, data, {headers: {"Content-Type": "application/json"}}).then(res => {
                          this.orderInfo.systemStatus = 5
                          console.log(res)
                          //  this.$router.push({path: '/engineer/enWorkingOrder',query: {orderId: this.orderId}})
                        }
                      )
                    }
                  } else {
                    this.positionError = true
                    this.warn("未知原因导致获取地理位置失败")
                  }
                },
                error: res => {
                  this.positionError = true
                  this.warn("未知原因导致微信获取地理位置失败")
                },
                cancel: function (res) {
                  this.positionError = true
                  this.warn("由于您拒绝程序获取位置，导致定位失败。")
                }
              })
            })   */
        },
        photoArrive: function () {
          this.showPopup()
          if (this.picPathList.length > 0){
            // 添加照片
            for (var i = 0; i < this.picPathList.length; i++) {
              this.picIdList.push(this.picPathList[i].id)
            }
            let data
            if (this.arriveLoc.lng){
              data = {
                wkt: 'Point('+this.arriveLoc.lng+' ' + this.arriveLoc.lat + ')',
                arriveFileStore: this.picIdList.join(';'),
                arriveStatus: 0,
              }
            } else {
              data = {
                arriveFileStore: this.picIdList.join(';'),
                arriveStatus: 0,
              }
            }
            this.$http.put('/work/api/workorder/inhand/' + this.orderId, data, {headers:{"Content-Type": "application/json"}}).then(res => {
                this.orderInfo.systemStatus = 5
                console.log(res)
                //  this.$router.push({path: '/engineer/enWorkingOrder',query: {orderId: this.orderId}})
              }
            )
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: '请上传照片',
            })
          }
        },
        startWork: function () {
          this.$router.push({path: '/engineer/enWorkingCatalog/', query: {orderId: this.orderId}})
        },
        addTollService: function () {
          this.$router.push({path: '/engineer/enAddTollService/', query: {orderId: this.orderId}})
        },
        confirmService: function () {
          this.$router.push({path: '/user/orderConfirm',query: {orderId: this.orderId,eng: true}})
        },
        invitationRegister: function() {
          let data = {
            user: this.$store.state.user.userInfo.id,
            inviter: this.orderInfo.proposer.id
          }
          this.qr = "/wechat/resource/invitation/qr?user="+this.orderInfo.proposer.id +"&inviter="+ this.$store.state.user.userInfo.id
          this.showQR = true
        },
        payOrder: function () {
          this.$http.post('/work/api/workorder/pay/'+this.orderId+'/create').then(res=>{
              this.payQR(res.data.data)
            }
          )
        },
        payQR: function (id) {
          this.isShowLoading = true
          let that = this
          this.$register(["chooseWXPay"]).then(() => {
            this.$http.get("/wechat/pay/?order=" + id + "&type=QR").then(res => {
              that.isShowLoading = false
              this.showPayQR = true
              that.payQRbase = res.data.data

            })
          })
        },
        goSpareCenter: function () {
          this.$router.push({path: '/engineer/enMySpareCenter/', query: {orderId: this.orderId}})
        },
        dateFormat(value) {
          return dateFormat(value, 'YYYY-MM-DD')
        },
        getServiceList: function () {
          let data={workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
          this.$http.get('/work/api/serviceitem/', {params: data}).then(res=>{
              for (var i = 0; i < res.data.data.length; i++){ //筛选未确认的服务项目
                if (res.data.data[i].status === 3) {
                  this.serviceList.push(res.data.data[i])
                  this.allToll += res.data.data[i].toll
                }
              }
            }
          )
        },
        goMyLocus: function() {
          let startMark
          let endMark
          if (this.orderInfo.engineerWork.startWkt){
            let startWkt = this.orderInfo.engineerWork.startWkt.substring(this.orderInfo.engineerWork.startWkt.indexOf("(") + 1, this.orderInfo.engineerWork.startWkt.indexOf(")"))
            startMark = startWkt.split(" ");
          } else {
            startMark = [this.startLoc.lng, this.startLoc.lat]
          }
          if (this.orderInfo.engineerWork.arriveWkt){
            let endWkt = this.orderInfo.engineerWork.startWkt.substring(this.orderInfo.engineerWork.startWkt.indexOf("(") + 1, this.orderInfo.engineerWork.startWkt.indexOf(")"))
            endMark = endWkt.split(" ");
          } else {
            endMark = [this.arriveLoc.lng, this.arriveLoc.lat]
          }
          console.log(startMark)
          console.log(endMark)
          this.$router.push({path: '/engineer/enMyLocus/', query: {'startMark': startMark, 'endMark': endMark}})
        },
        //格式化日期
        dateFormat(value) {
          return dateFormat(value, 'YYYY.MM.DD')
        },
      },
      mounted(){
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id
        this.$http.get('/work/api/workorder/'+id).then(res=>{
            console.log(res)
            this.orderInfo = res.data.data
            if (this.orderInfo.repairFileStore) {
              let key = this.orderInfo.repairFileStore
              this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
                let result = res.data.data[key]
                for (var i = 0 ; i < result.length; i++){
                  this.picList.push(result[i].path)
                }
                //如果有多张则在预览图中显示
                this.bigImgPath = res.data.data[key].map(item => {
                  return {msrc: this._getPathNo(item.path), src:  this._getPathNo(item.path)}
                })
              })
            }
            if (this.orderInfo.wkt) {
            //  this.manLoc.lng = this.orderInfo.wkt
              let manStr = this.orderInfo.wkt.substring(this.orderInfo.wkt.indexOf("(") + 1, this.orderInfo.wkt.indexOf(")"))
              var manArr = manStr.split(" ");
              this.manLoc.lng = manArr[0]
              this.manLoc.lat = manArr[1]
            }
            if(this.orderInfo.systemStatus > 6){
              this.getServiceList()
            }
          }
        )
      },
    }
  function Rad(d){
    return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
  }
  function getDistance(lng1,lat1,lng2,lat2) {
    var radLat1 = Rad(lat1);
    var radLat2 = Rad(lat2);
    var a = radLat1 - radLat2;
    var  b = Rad(lng1) - Rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
    s = s *6378.137 ;// EARTH_RADIUS;
    s = Math.floor(s * 10000) / 10;  //输出为公里
    s = parseInt(s);
    return s;
  }

</script>

<style lang="less">
  .enWorkingOrder {
    font-size: 0.13rem;
    padding-bottom: 0.4rem;
    .top {
      font-size: 0.15rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      padding-bottom: 0.01rem;
    }

    .tip-box {
      display: flex;
      justify-content: space-between;
      padding: 0 0.28rem;
    }

    .line {
      display: flex;
      justify-content: space-between;
      margin: 0.28rem 0.32rem 0.27rem 0.32rem;
      height: 0.02rem;
      background-color: #eee;
    }

    .line i {
      width: 0.14rem;
      height: 0.14rem;
      background-color: #eee;
      position: relative;
      display: inline-block;
      border-radius: 0.14rem;
      margin-top: -0.07rem;
    }

    .down {
      background-color: #42a3fd !important;
    }

    .line i.marking {
      background: url("~assets/images2/icon_daodian@2x.png");
      background-size: contain;
      height: 0.18rem;
      width: 0.18rem;
      margin-top: -0.08rem;
    }

    .map {
      border-top: solid 1px #ebebeb;
      height: 0.51rem;
      line-height: 0.51rem;
      padding-left: 0.28rem;
    }

    .map img {
      margin-left: 0.1rem;
      width: 0.15rem;
      height: 0.2rem;
      margin-top: -0.05rem;
    }

    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      margin-top: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
      .errorDescription{
        width: 2.75rem;
      }
    }

    .order-info ul {

    }

    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .warrantyStatus{
      display: flex;
      justify-content: space-between;
      width: 2.75rem;
      margin-left: 0.75rem;
      font-size: 0.13rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }
    .pic-box {
      width: 2.75rem;
      .pics{
        overflow-x: auto;
        .picItem{
          display: block;
          width: 1.3rem;
          height: 0.85rem;
          margin-right: 0.05rem;
          margin-top: 0.04rem;
        }
      }
    }
    .long {
      width: 1rem !important;
    }


    .border {
      width: 78%;
      padding-left: 0.05rem;
      border: solid 0.01rem #ebebeb;
      -webkit-border-radius: 0.04rem;
      -moz-border-radius: 0.04rem;
      border-radius: 0.04rem;
    }
    .photo-box{
      display: flex;
      margin-top: 0.4rem;
      margin-left: 0.15rem;
      .photo{
        width: 0.8rem;
        height: 0.3rem;
        background-color: #42a3fd;
        line-height: 0.3rem;
        text-align: center;
        color: #fff;
        margin-right: 0.1rem;
        border-radius: 0.04rem;
      }
      span{
        font-size: 0.1rem;
        width: 2.75rem;
      }
    }
    .btn-box{
      display: flex;
      margin-top: 0.4rem;
      margin-left: 0.15rem;
      div{
        width: 0.8rem;
        height: 0.3rem;
        background-color: #42a3fd;
        line-height: 0.3rem;
        text-align: center;
        color: #fff;
        margin-right: 0.4rem;
        border-radius: 0.04rem;
      }
      .register{
        background-color: #ed3f14;
      }
    }
    .toll-box{
      background-color: #fff;
      margin-top: 0.1rem;
      .toll-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      .toll-info {
        font-size: 0.15rem;
        /*border-bottom: solid 1px #ebebeb;*/
      }

      .toll-info ul {
        border-bottom: solid 1px #eee;
        border-top: solid 1px #eee;
      }

      .toll-info ul li {
        margin-top: 0.15rem;
        line-height: 0.15rem;
        height: 0.15rem;
        display: flex;
        justify-content: space-between;
      }

      .toll-info .info-item {

      }

      .sum {
        display: flex;
        justify-content: flex-end;
        height: 0.43rem;
        line-height: 0.43rem;
        padding-left: 0.15rem;
      }
    }
    .evaluate-box{
      margin-top: 0.1rem;
      background-color: #fff;
      .evaluate-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: solid 1px #ebebeb;
      }
      .suggest-title{
        font-weight: bold;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: solid 1px #ebebeb;
      }
      .suggest-content{
        padding: 0.1rem;
      }
      .order-score {
        margin-top: 0.13rem;
        padding-left: 0.1rem;
      }
      .star-box {
        display: flex;
        margin-top: 0.1rem;
        padding-bottom: 0.15rem;
      }
      .star-box .star-item {
        width: 0.19rem;
        height: 0.19rem;
        background: url("~assets/images/icon_xingxing_nol@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        margin-right: 0.15rem;
      }
      .star-item:last-child {
        margin-right: 0;
      }
      .star-box .light.star-item {
        background-image: url("~assets/images/icon_xingxing_sel@2x.png") !important;
      }
      .bottom-content {
        font-size: 0.15rem;
      }
      .appraise-box {
        padding-bottom: 0.15rem;
      }
      ul .apparise-item {
        margin-top: 0.15rem;
      }
      .item-content {
        margin-left: 0.15rem;
      }
      .selects {
        display: flex;
        font-size: 0.13rem;
        color: #999;
        margin-top: 0.1rem;
        height: 0.16rem;
        line-height: 0.16rem;
      }
      .select-item {
        display: flex;
        margin-left: 0.3rem;
      }
      .select-item:first-child {
        margin-left: 0.25rem;
      }
      .mark {
        width: 0.16rem;
        height: 0.16rem;
        margin: 0 0 0 0.05rem;
        background: url("~assets/images/icon_nol@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
      }
      .typeMark .mark {
        background: url("~assets/images/icon_sel@2x.png") no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
      }

      .bottom-suggest {
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.15rem;
        padding: 0 0.1rem;
      }
      .bottom-suggest input {
        width: 2.15rem;
        -webkit-border-radius: 0.02rem;
        -moz-border-radius: 0.02rem;
        border-radius: 0.02rem;
        border: 1px solid #dfdfdf;
      }
    }
  }

</style>
